<template>
  <div>count: {{ count }}</div>
  <button @click="setCount">按钮</button>

  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
  </ul>
  <button @click="person.age = 18">新增</button>
</template>

<script lang="ts">
interface IData {
  count: number;
  person: {
    name: string;
    age?: number;
  };
}

export default {
  name: "App",
  /*
    name
    data
    methods
    watch
    computed
    components
    directives
    props
    生命周期函数
      初始化渲染阶段
        beforeCreate
        created
        beforeMount
        mounted
      更新阶段
        beforeUpdate
        updated
      卸载阶段（变化）
        vue2:
          beforeDestroy
          destroyed
        vue3:
          beforeUnmount
          unmounted
      被keep-alive缓存
        activated
        deactivated
  */
  data(): IData {
    return {
      count: 0,
      person: {
        name: "jack",
      },
    };
  },
  methods: {
    setCount() {
      this.count++;
    },
  },
};
</script>

<style></style>
